<template>
  <div class="record-box">
    <template v-if="recordList.length > 0">
      <div class="record-list" v-for="(item, index) in recordList" :key="index">
        <div class="record-left" :class="item.iconClass">
          <div class="time-icon"></div>
        </div>
        <div class="record-right">
          <div class="time-label">
            <div class="time-left">{{ item.option }}</div>
            <div class="time-right">{{ item.reTime }}</div>
          </div>
          <div class="record-log">
            <div class="log-list-wrap">
              <template v-if="item.textList && item.textList.length > 0">
                <div
                  class="text-item"
                  v-for="(tItem, tIndex) in item.textList"
                  :key="tIndex"
                  v-html="tItem"
                ></div>
              </template>
              <template v-if="item.labelList && item.labelList.length > 0">
                <div
                  class="label-item"
                  v-for="(lItem, lIndex) in item.labelList"
                  :key="lIndex"
                >
                  <div class="label-left">{{ lItem.label }}：</div>
                  <div class="label-right">{{ lItem.value }}</div>
                </div>
              </template>
              <template v-if="item.remarkList && item.remarkList.length > 0">
                <div
                  class="remark-item"
                  v-for="rItem in item.remarkList"
                  :key="rItem.label"
                >
                  <div class="remark-left">{{ rItem.label }}：</div>
                  <div class="remark-right">
                    <TextFold :text="rItem.value">
                      <template v-slot:default="{ clickToggle, expanded }">
                        <div @click="clickToggle" class="btn">
                          {{ expanded ? "收起" : "展开" }}
                          <i
                            :class="iconClass(expanded)"
                            style="font-weight: 700"
                          ></i>
                        </div>
                      </template>
                    </TextFold>

                    <!-- {{ rItem.value }} -->
                  </div>
                </div>
              </template>
              <div
                class="image-list"
                v-if="item.imgsList && item.imgsList.length > 0"
              >
                <el-image
                  class="image-item"
                  v-for="(iItem, iIndex) in item.imgsList"
                  :key="iIndex"
                  :src="iItem"
                  :preview-src-list="item.imgsList"
                >
                </el-image>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <img src="@/assets/common/empty_icon.png" v-else class="empty-table-img" />
  </div>
</template>

<script>
import TextFold from "./text-fold.vue";
export default {
  name: "OperationRecordBox",
  props: {
    recordList: {
      type: Array,
      default: () => [],
    },
    iWidth: {
      type: Number,
      default: 192,
    },
    iHeight: {
      type: Number,
      default: 209,
    },
    emptyTop: {
      type: Number,
      default: 32,
    },
  },
  components: {
    TextFold,
  },
  methods: {
    iconClass(val) {
      return val ? "el-icon-arrow-up" : "el-icon-arrow-down";
    },
  },
};
</script>

<style lang="scss" scoped>
.empty-table-img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.record-box {
  height: 100%;
  width: 100%;
  .record-list {
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    margin-bottom: 16px;
    &:last-child {
      .record-left {
        .time-icon {
          display: none;
        }
      }
    }
  }
  .record-left {
    position: relative;
    width: 24px;
    height: 24px;
    background-image: url("~@/assets/icons/finish.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 16px;
    .time-icon {
      position: absolute;
      border-right: 1px solid #0087d6;
      top: 28px;
      width: 1px;
      height: 1000px;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
    &.blue-warn {
      background-image: url("~@/assets/icons/blue-warn.png");
    }
  }
  .record-right {
    flex: 1;
    .time-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      .time-left {
        color: rgba($color: #000000, $alpha: 0.9);
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
      }
      .time-right {
        color: rgba($color: #000000, $alpha: 0.4);
        font-weight: 400;
        font-size: 12px;
      }
    }
    .record-log {
      .text-item {
        color: rgba($color: #000000, $alpha: 0.9);
        font-weight: 400;
        font-size: 14px;
        margin-bottom: 12px;
      }
      .label-item {
        display: flex;
        align-items: baseline;
        font-weight: 400;
        font-size: 14px;
        margin-bottom: 12px;
        word-break: break-all;
        .label-left {
          min-width: 70px;
          color: rgba($color: #000000, $alpha: 0.4);
        }
        .label-right {
          width: 0;
          flex: 1;
          color: rgba($color: #000000, $alpha: 0.9);
        }
      }
      .remark-item {
        display: flex;
        align-items: baseline;
        font-weight: 400;
        font-size: 14px;
        margin-bottom: 12px;
        padding: 12px;
        word-break: break-all;
        background-color: #f8f8f8;
        color: rgba($color: #000000, $alpha: 0.4);
        border-radius: 4px;
        .remark-left {
          // min-width: 60px;
          // max-width: 72px;
        }
        .remark-right {
          width: 0;
          flex: 1;
        }
      }
      .image-list {
        display: flex;
        flex-wrap: wrap;
        .image-item {
          width: 72px;
          height: 72px;
          margin: 0 8px 8px 0;
          border-radius: 3px;
          padding: 4px;
          border: 1px dashed #dcdcdc;
          background: #eeeeee;
          &:nth-child(5n) {
            margin: 0 0 8px 0;
          }
        }
      }
    }
  }
  .record-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    .empty-icon {
      background-image: url("~@/assets/common/empty_icon.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
}
.btn {
  // width: 36px;
  margin-right: 6px;
  color: #0087d6;
  cursor: pointer;
  background-color: #f8f8f8;
}
</style>
